<template>
  <div class="about">
    <ElRow type="flex" justify="center">
      <ElCol :xs="{span:24}" :md="{span:18}" class="mydiv">
        <h2>关于我</h2>
        
        <p class="tag">成长经历</p>
        <div v-html="content"></div>
        <p class="tag">照片墙</p>
        <div class="image">
          <img :src="require('@/assets/image/1.jpg')" width="300" alt="" srcset="">
          <img :src="require('@/assets/image/2.jpg')" width="300" alt="" srcset="">
          <img :src="require('@/assets/image/3.jpg')" width="300" alt="" srcset="">
          <img :src="require('@/assets/image/4.jpg')" width="300" alt="" srcset="">
          <img :src="require('@/assets/image/5.jpg')" width="300" alt="" srcset="">
          <img :src="require('@/assets/image/6.jpg')" width="300" alt="" srcset="">
          <!-- <img :src="" alt="" srcset=""> -->
        </div>
      </ElCol>
    </ElRow>
  </div>
</template>
<script>
import {GET_ABOUT} from '@/api/Article'
export default {
  data () {
    return {
      content:'<p>你好，我是叶权通你好，我是叶权通你好，我是叶权通你好，我是叶权通你好，我是叶权通你好，我是叶权通你好，我是叶权通你好，我是叶权通</p>'
    }
  },
  created () {
    this.init()
  },
  methods: {
    init(){
      GET_ABOUT().then(res=>{
        console.log("关于=>>",res);
        this.content = res.data.content
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.about{padding-top: 120px;}
.mydiv{
  background-color: #fff;
  padding: 20px;
  .image{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    img{
      padding: 5px;
      padding-bottom: 20px;
    }
  }
}
.tag{
  background-color: #00a0c6;
  padding: 7px;
  color: #fff;
}
</style>
